// mapbox gl 自带比例尺
.mapboxgl-ctrl-scale {
  background-color: transparent;
  border: 2px solid #9b9da8;
  border-top-width: 0;
  color: #5d637e;
  font-size: 12px;
  font-weight: 400;
  height: 10px;
  letter-spacing: 1.12px;
  line-height: 10%;
  margin: 0 0 18px 10px;
  text-align: center;
  user-select: none;
}

// 自定义经纬度控件
.mapboxgl-ctrl-coordinates {
  background-color: rgba(244, 244, 244, 0.5);
  border-radius: 2px;
  // bottom: 0;
  color: #5d637e;
  font-size: 12px;
  font-weight: 400;
  // left: 110px;
  letter-spacing: 1px;
  max-width: 230px;
  padding: 0 10px;
  // position: absolute;
  text-align: center;
  white-space: nowrap;
  width: auto;
}

// 自定义导航控件
.mapboxgl-ctrl-custom-navigation {
  background: #fff;
  border-radius: 1px;
  box-shadow: 0 0 4px 0 rgba(88, 98, 230, 0.2);
  display: flex;
  opacity: 0.6;

  .custom-group-button {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    display: block;
    height: 29px;
    outline: none;
    padding: 0;
    width: 29px;

    &:not(:last-child) {
      border-right: 1px solid #ddd;
      width: 30px;
    }

    .custom-ctrl-icon {
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: 16px;
      display: block;
      height: 100%;
      width: 100%;
    }
  }

  // 概览 close
  .custom-overview {
    .custom-ctrl-icon {
      background-image: url('../../../public/map/close-overview.svg');
    }
  }

  // 概览 open
  .custom-overview-open {
    .custom-ctrl-icon {
      background-image: url('../../../public/map/open-overview.svg');
    }
  }

  // 平移 close
  .custom-drag-pan {
    .custom-ctrl-icon {
      background-image: url('../../../public/map/dragpan.svg');
    }
  }

  // 平移 open
  .drag-pan-enabled {
    .custom-ctrl-icon {
      background-image: url('../../../public/map/dragpanenbaled.svg');
    }
  }

  // 放大
  .custom-zoom-in {
    .custom-ctrl-icon {
      background-image: url('../../../public/map/zoomin.svg');
    }
  }

  // 缩小
  .custom-zoom-out {
    .custom-ctrl-icon {
      background-image: url('../../../public/map/zoomout.svg');
    }
  }

  .custom-reset-map {
    .custom-ctrl-icon {
      background-image: url('../../../public/map/reset.svg');
    }
  }

}
